<template>
    <el-drawer  :visible.sync="dialogVisible" :with-header="false" class="demand_box" size='720px' @close="resetForm()">
        <div class="flexbox flexcolumn height_100">
            <div class="demand_head flexbox flexcenter flexbetween">
                <span class="demand_title">{{showData.qc_delivery_monitoring_name || '计划消耗预警监控提醒'}}</span>
                <span class="icon_btn icon_btn_32" @click="resetForm()"><img src="@/assets/img/close_check.svg" alt=""></span>
            </div>
            <div class="main_box">
                <div class="card_title font_16 font_weight_500">监控账户/预警提醒人</div>
                <div class="">
                <custom-table ref="multipleTable" :data="showData.advertiser_list"  :isPage="false" key="drawerTable" height="400" >
                    <el-table-column  label="广告账户ID"  prop="qc_delivery_monitoring_advertiserid"></el-table-column>
                    <el-table-column  label="广告账户名称" prop="name"></el-table-column>
                    <el-table-column  label="账户类型"  >
                            <template slot-scope="scope">
                                {{scope.row.qc_delivery_monitoring_marketing_goal_type | filterCheck}}
                            </template>
                    </el-table-column>
                    <el-table-column  label="预警提醒人"  prop="advertiser_name">
                    <template slot-scope="scope">
                        {{  filterPersonnel(scope.row.qc_delivery_monitoring_userid) }}
                        <!-- <el-select size="small" v-model="scope.row.qc_delivery_monitoring_userid" multiple collapse-tags disabled>
                            <el-option v-for="item in roleList" :label="item.nickname" :value="item.id"></el-option>
                        </el-select> -->
                    </template>
                </el-table-column>
            </custom-table>
                </div>
            </div>
            <div  class="main_box" >
                <div class="card_title font_16 font_weight_500">飞书群推送地址</div>
                <div class="card_info_box">
                    <p class="font_14" style="color:#5C636C">{{showData.qc_delivery_monitoring_feishu_url || "--"}}</p>
                </div>
            </div>
            <div  class="main_box" style="margin:0 20px">
                <div class="card_title font_16 font_weight_500">固定条件</div>
                <div class="card_info_box">
                    <ul>
                        <li class="font_14" style="margin-bottom:8px">计划总消耗范围：{{showData.qc_delivery_monitoring_cost_left}} - {{showData.qc_delivery_monitoring_cost_right}}</li>
                        <li class="font_14" >{{showData.qc_delivery_monitoring_roi_type == '0'?'直接 roi 范围':'7日 roi 范围'}}：{{showData.qc_delivery_monitoring_roi_left}} - {{showData.qc_delivery_monitoring_roi_right}}</li>
                    </ul>
                </div>
            </div>
            <div  class="main_box" v-if="showData.alerts_list.length > 0">
                <div class="card_title font_16 font_weight_500">预警规则</div>
                <div class="card_info_box" style="margin-bottom:8px" v-if="showData.alerts_list.map(e => e.monitoring_type).includes(1) || showData.alerts_list.map(e => e.monitoring_type).includes('1')">
                    <p style="margin-bottom:14px">预算不足预警</p>
                    <div class="flexbox flexcenter ">
                        <div class="nav flexbox flexcenter flexjust">#</div>
                        <div class="font_14">
                            当计划预算消耗大于 <span class="font_weight_500" style="color:#191B1E">{{alerts_list_fn(1).cost}} %</span> 且未增加预算时，则提醒增加预算。
                        </div>
                    </div>
                </div>
                <div class="card_info_box" style="margin-bottom:8px" v-if="showData.alerts_list.map(e => e.monitoring_type).includes(2) || showData.alerts_list.map(e => e.monitoring_type).includes('2')">
                    <p style="margin-bottom:14px">计划闲置预警</p>
                    <div class="flexbox flexcenter ">
                        <div class="nav flexbox flexcenter flexjust">#</div>
                        <div class="font_14">
                            当计划在 {{alerts_list_fn(2).segmentation}} 分钟内的消耗小于 <span class="font_weight_500" style="color:#191B1E">¥ {{alerts_list_fn(2).cost}}</span> 时，则提醒调整计划。
                        </div>
                    </div>
                </div>
                <div class="card_info_box" v-if="showData.alerts_list.map(e => e.monitoring_type).includes(3) || showData.alerts_list.map(e => e.monitoring_type).includes('3')">
                    <p style="margin-bottom:14px">消耗骤减预警</p>
                    <div class="flexbox flexcenter ">
                        <div class="nav flexbox flexcenter flexjust">#</div>
                        <div class="font_14">
                            当计划在 {{alerts_list_fn(3).segmentation}} 分钟内的消耗同上个时段的消耗减少 <span class="font_weight_500" style="color:#191B1E">¥ {{alerts_list_fn(3).cost}}</span>  时，则提醒调整计划。
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </el-drawer>
</template>

<script>
import CustomTable from "@/components/components/CustomTable";
export default {
    props: ["showData"],
    components:{
        CustomTable
    },
    created() {
      this.getRoleList();  
    },
     filters:{
        
        filterCheck(arr){
            let description = '';  
            if (arr.length === 0) {
                // 如果数组为空  
                description = '';  
            } else {
                // 初始化一个空数组来存放结果  
                let descriptions = [];  
                
                // 遍历数组，根据元素添加对应的描述  
                arr.forEach(item => {  
                switch (item) {
                    case '0':  
                    descriptions.push('直播托管');  
                    break;  
                    case '1':  
                    descriptions.push('短视频托管');  
                    break;  
                    default:  
                    // 如果遇到不是'1'或'2'的元素，可以选择忽略或添加其他逻辑  
                    break;  
                }  
                });  
            
                // 将结果数组转换为字符串，并用逗号分隔  
                description = descriptions.join('、');  
            
                // 如果结果数组为空（理论上不应该发生，除非输入了非法的值），则返回'无内容'  
                if (description === '') {  
                    description = '';
                }  
            }  
            return description;  
        }
    },
    data() {
        return {
            dialogVisible: false,
            roleList:[]
        }
    },
    methods: {
        filterPersonnel(arr){
            let arr2 = [];
                console.log( this.roleList,'///')
                this.roleList.filter(e=>{
                    if(arr.includes(e.id)){
                        arr2.push(e.nickname)
                    }
                })
            return arr2.join('、');
        },
        alerts_list_fn(i){
            let arr = {};
            this.showData.alerts_list.forEach(e=>{
                if(e.monitoring_type == i){
                    arr = e
                }
            })
            return arr
        },
        async getRoleList() {
            const { data: res } = await this.$http.post(
                "adminapi/company/hzOptimizerList",
                {
                    query: "",
                }
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.roleList = res.data;
            }
        },
        resetForm(){
            this.dialogVisible = false;
        }
    }

}
</script>

<style scoped>
.main_box{
    margin: 20px;
}
.card_title{
    margin-bottom: 12px;
}
.font_14{
    color:#5C636C;
}
ul{
    padding-left: 16px;
    list-style: disc;
}
.card_info_box{
    width: 623px;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid #E8EAEC;
}
.nav{
    height: 20px;
    width: 20px;
    margin-right: 8px;
    border-radius: 4px;
    color: #5287FF;
    background:#F5F7FF;
}
</style>